import React, { useEffect } from 'react'
import { Card,Breadcrumb,Form,Button,Radio,Select ,DatePicker,Table,Tag,Image, Space} from "antd";
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { getArticleList, getChannelList } from '@/store/actions/article';
import img from "@/assets/error.png";
import { EditOutlined,DeleteOutlined } from '@ant-design/icons';
export default function Article() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getChannelList())
    dispatch(getArticleList())
  },[dispatch])
  const articles = useSelector(state => state.article.articles)
  const channelsList = useSelector(state => state.article.channels)
  const onFinish = (values) => {
    console.log('form',values);
  }
  const STATUS =[
    {value:-1,title:"全部",color:'magenta'},
    {value:0,title:"草稿",color:'red'},
    {value:1,title:"待审核",color:'volcano'},
    {value:2,title:"审核通过",color:'lime'},
    {value:3,title:"审核失败",color:'orange'},
  ]
  
  
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      key:'cover',
      render: value => {
        if(value.type === 1){
          return ( 
            <Image
              width={200}
              height={150}
              src={value.images[0]}
              fallback={img}
            />
          )
        }else{
          return ( 
            <Image
              width={200}
              height={150}
              src={img}
              fallback={img}
            />
          )
        }
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: value => {
        const item = STATUS.find(item => value===item.value)
        return (<Tag color={item.color} key={value}>
                  {item.title}
                </Tag>)
      },
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
      key: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
      key: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
      key: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
      key: 'like_count',
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: value => {
        return (
          <Space>
            <Button type="primary" shape="circle" icon={<EditOutlined />} />
            <Button type='danger' shape="circle" icon={<DeleteOutlined />} />
          </Space>
        )
      }
    },
  ];
  return (
    <div> 
      <Card title={ 
         <Breadcrumb>
          <Breadcrumb.Item>
            <Link to={'/home'}>首页</Link>  
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to={'/home/article'}>内容管理</Link>  
          </Breadcrumb.Item>
        </Breadcrumb>
      } >

        <Form onFinish={onFinish} initialValues={{ status: -1 }}  size="large">
          <Form.Item label="状态" name="status">
            <Radio.Group  value={-1}>
              {STATUS.map(item =>  <Radio key={item.value} value={item.value}>{item.title}</Radio>)}
            </Radio.Group>
          </Form.Item>
          <Form.Item label="频道"  name="channel_id">
            <Select
              showSearch
              placeholder="请选择一个频道"
              style={{ width: 200 }}
            >
              {channelsList.map(item => <Select.Option key={item.id} value="tom">{item.name}</Select.Option>)}
            </Select>
          </Form.Item>
          <Form.Item label="日期" name='date'>
            <DatePicker.RangePicker />
          </Form.Item>
          <Form.Item label="">
            <Button type='primary'  htmlType="submit">筛选</Button>
          </Form.Item>
        </Form>
      </Card>
      <Card title={`已筛${articles.total_count}条表格` } style={{marginTop:10}}>
      <Table dataSource={articles.results} columns={columns} rowKey={'id'}/>
      </Card>
  </div>
  )
}
